<!DOCTYPE html>
<html lang="en">
    <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>height</title>
  <style>
    section {
      margin: 0 auto;
      max-width: 740px;
      display: flex;
      border: 1px solid;
    }
    .column {
      margin: 10px;
      border: 1px solid;
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0;
    }
    section:first-of-type .column:first-of-type {
      flex-grow: 2;
      flex-shrink: 2;
      flex-basis: 22px; /** 补充padding 20 + 2*/
      color: red;
    }
  </style>
</head>
<body>
  <!-- 
    第一行和第二行对齐
    flex-grow   当空间变大时，如何占据剩余空间，默认0
    flex-shrink 当空间变小时，如何占据空间 默认值 1
    flex-basis flex 元素在主轴方向上的初始大小， 默认值 auto 内容
   -->
<section>
  <div class='column'>a</div>
  <div class='column'>b</div>
  <div class='column'>菜鸟的前端框架菜鸟的前端框架菜鸟的前端框架</div>
</section>
<section>
  <div class='column'>a</div>
  <div class='column'>b</div>
  <div class='column'>c</div>
  <div class='column'>d</div>
</section>
</body>
</html>
